<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 头部操作栏 -->
            <form class="layui-form">
                <div class="layui-form lay-header">
                <div class="toolbar">
                    <div class="layui-form-item lay-query-content">
                        <div class="lay-query-box">
                            <div class="query-lt">
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">计划单编号：</label>
                                    <div class="layui-input-inline">
                                        <input name="code" class="layui-input" type="text" placeholder="计划单编号"/>
                                    </div>
                                </div>
                                <!--<div class="layui-inline">
                                    <label class="layui-form-label w-auto">出库类型：</label>
                                    <div class="layui-input-inline mr0">
                                        <select name="inoutTypeCode" lay-filter="inoutTypeCode">
                                        </select>
                                    </div>
                                </div>-->
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">按发货仓：</label>
                                    <div class="layui-input-inline">
                                        <select name="outWarehouseId" lay-filter="outWarehouseId" id="outWarehouseNameSelect">
                                            <option value="">按发货仓</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">创建时间：</label>
                                    <div class="layui-input-inline">
                                        <input  id="pTime" class="layui-input date-icon" type="text" placeholder="选择创建时间" autocomplete="off" readonly/>
                                    </div>
                                    <input name="startCreateTime" id="sTime" style="display: none"/>
                                    <input name="endCreateTime" id="eTime" style="display: none"/>
                                </div>
                            </div>
                            <div class="query-rt">
                                <div class="layui-inline">
                                    <button type="button" id="inventoryInoutSearch" class="layui-btn icon-btn color-green" lay-filter="inventoryOutPlanSearch" lay-submit>查询</button>
                                    <button type="reset" class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </form>
            <!-- 表格 -->
            <table class="layui-table" id="inventoryOutPlanTable" lay-filter="inventoryOutPlanTable"></table>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="inventoryOutPlanTableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="details">详情</a>
</script>

<!-- 表单弹窗 -->
<script type="text/html" id="inventoryOutPlanForm">
    <form lay-filter="inventoryOutPlanForm" id="inventoryOutPlanForm2" class="layui-form model-form">
        <input name="id" type="hidden"/>
        <div  class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;"><span style="color: red">*</span>入库计划编号</label>
            <div class="layui-form-mid layui-word-aux">
                <span style="color: red" id="planCode"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;">状态</label>
            <div class="layui-form-mid layui-word-aux">
                <span style="color: red" id="statusDesc"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;"><span style="color: red">*</span>发货商</label>
            <div class="layui-form-mid layui-word-aux">
                <span style="color: red" id="fhs">湖南云端商业管理有限公司</span>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;"><span style="color: red">*</span>出货仓库</label>
            <div class="layui-form-mid layui-word-aux">
                <span style="color: red" id="outWarehouseId"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;">发货人</label>
            <div class="layui-form-mid layui-word-aux">
                <span style="color: red" id="userName">刘智</span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;">发货时间</label>
            <div class="layui-form-mid layui-word-aux">
                <span style="color: red" id="sendTime2"></span>
            </div>
        </div>
        <div  class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;"><span style="color: red">*</span>目标仓库</label>
            <div class="layui-form-mid layui-word-aux">
                <span style="color: red" id="inWarehouseId"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;">入库商品</label>
        </div>
        <table class="layui-table" id="deliverProductTable" lay-filter="deliverProductTable"></table>

        <div class="layui-form-item">
            <label class="layui-form-label" style="width: 100px;">商品描述</label>
            <div class="layui-form-mid layui-word-aux">
                <span style="color: red" id="remarkDesc"></span>
            </div>
        </div>
        <div class="layui-form-item text-left" style="margin-left: 134px;">
            <button class="layui-btn" type="button" id="backBtn" lay-filter="inventoryOutPlanFormSubmit" lay-submit>返回</button>
        </div>
    </form>
</script>

<script type="text/html" id="inventoryOutProductForm">
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-body">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <select name="productTypeId" lay-filter="productTypeId" id="productTypeId">
                                <option value="">类型</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <select name="productCategoryId" lay-filter="productCategoryId" id="productCategoryId">
                                <option value="">物料分类</option>
                            </select>
                        </div>

                        <!--<div class="layui-inline">
                            <select name="status" lay-filter="status">
                                <option value="">按状态</option>
                                <option value="stockup">备货中</option>
                                <option value="reviewed">待复核</option>
                                <option value="warehouse">待出库</option>
                                <option value="sign">待签收</option>
                                <option value="complete">完成</option>
                            </select>
                        </div>-->
                        <div class="layui-inline">
                            <input name="skuSpecValueNames" class="layui-input" type="text" placeholder="规格码"/>
                        </div>
                        <div class="layui-inline">
                            <input name="productName" class="layui-input" type="text" placeholder="物料名称"/>
                        </div>
                        <div class="layui-inline">
                            <input name="skuCode" class="layui-input" type="text" placeholder="物料编号"/>
                        </div>
                        <div class="layui-inline">
                            <button  class="layui-btn icon-btn" lay-submit=""
                                    lay-filter="productSearch"><i class="layui-icon">&#xe615;</i>搜索
                            </button>
                        </div>
                    </div>
                </form>
                <table class="layui-table" id="productTable" lay-filter="productTable"></table>
                <div class="layui-form-item" style="margin-top: 20px;text-align: center;">
                    <div class="layui-inline">
                        <button id="productConfirmBtn" type="button" lay-event="getCheckData" class="layui-btn icon-btn">确定提交 </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>
<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'admin','laydate'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var admin = layui.admin;
        var upload = layui.upload;
        var laydate = layui.laydate;
        var type = 0; //0是添加 1是详情
        var productSkuCodeArr = [];
        var deliverProductList = [];//出库物料数据
        var outData = null;
        //日期范围
        laydate.render({
            elem: '#pTime',
            type: 'date',
            range: true,
            done: function(value, date, endDate){
               if(value){
                   let dateValue = value.split(" - ");
                   $("input[name='startCreateTime']").val(dateValue[0] + " 00:00:00");
                   $("input[name='endCreateTime']").val(dateValue[1] + " 23:59:59");
               }else {
                   $("input[name='startCreateTime']").val("");
                   $("input[name='endCreateTime']").val("");
               }
            }
        });
        //查询仓库
        admin.req('enterprisecab/warehouse/admin/warehouse/getWarehouseVOAll', {}, function (res) {
            if (res.code == 200) {
                if (res.data.length > 0){
                    $.each(res.data,function (index,item) {
                        $("#outWarehouseNameSelect").append(new Option(item.name,item.id));
                    })
                    $.each(res.data,function (index,item) {
                        $("#inWarehouseNameSelect").append(new Option(item.name,item.id));
                    })
                    form.render('select');
                }
            } else {
                layer.msg(res.msg, {icon: 2});
            }
        }, 'GET');
        // 渲染表格
        var insTb = table.render({
            elem: '#inventoryOutPlanTable',
            url: config.base + 'enterprisecab/order/admin/cloudStoragePlan/list',
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type: 'checkbox'}
                ,{field: 'code', sort: true, title: '入库计划单编号', width: 150}
                ,{field: 'outWarehouseName',title: '发货仓库'}
                ,{field: 'consigner', title: '发货人'}
                ,{field: 'quantityTotal',title: '入库商品数量', width: 150}
               // ,{field: 'supplyAmount', sort: true, title: '出库商品单价', width: 150}
                ,{field: 'bazaarTotalMoney',  title: '市场总价', width: 160}
                ,{field: 'totalMoney',title: '总供货金额'}
                ,{field: 'inWarehouseName',title: '入库云仓'}
                ,{field: 'inAreaName', title: '仓库所在地'}
                ,{field: 'statusDesc',title: '状态'}
                ,{field: 'createTime',title: '添加时间', width: 160}
                ,{align: 'center', toolbar: '#inventoryOutPlanTableBar', title: '操作', width: 200}
            ]],
            done: function (res, curr, count) {
                //移除按钮
                var menuButton = config.getMenuButton(location.hash);
                if(menuButton.indexOf("搜索") == -1){
                    $('.layui-form.toolbar').remove();
                }
                if(menuButton.indexOf("修改") == -1){
                    $("[lay-event='edit']").remove();
                }
                if(menuButton.indexOf("删除") == -1){
                    $("[lay-event='del']").remove();
                }
            }
        });
        form.render('select');
        // 工具条点击事件
        table.on('tool(inventoryOutPlanTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'details') { //详情
                showEditModel(data);
            } else if (obj.event === 'audit') { // 审核
                doDelete(obj);
            }
        });

        //监听排序
        table.on('sort(inventoryOutPlanTable)', function(obj){
            table.reload('inventoryOutPlanTable', {
                initSort: obj
                ,where: {
                    sort: obj.field
                    ,order: obj.type
                }
            });
        });

        // 搜索
        form.on('submit(inventoryOutPlanSearch)', function (data) {
            insTb.reload({where: data.field,page: {curr: 1}},'data');
            return false;
        });



        // 显示编辑弹窗
        function showEditModel(data) {
            var index = admin.open({
                type: 1,
                area: ['1400px', '800px'],
                offset: '65px',
                title: '云仓入库单计划详情',
                content: $('#inventoryOutPlanForm').html(),
                success: function () {
                        //详情需要查询
                        admin.req('enterprisecab/order/admin/inventoryOutPlan/getInventoryOutPlanById', {id:data.id}, function (res) {
                            if (res.code == 200) {
                                $("#planCode").html(res.data.code);
                                $("#statusDesc").html(res.data.statusDesc);
                                $("#userName").html(res.data.consigner);
                                $("#sendTime2").html(res.data.sendTime);
                                $("#remarkDesc").html(res.data.remark);
                                $("#outWarehouseId").html(res.data.outWarehouseName);
                                $("#inWarehouseId").html(res.data.inWarehouseName + "(" + res.data.areaName + ")");
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'GET');
                    deliverProductList = [];//每次打开弹框清空出库物料数据
                        //出货商品详情
                        admin.req('enterprisecab/order/admin/inventoryOutPlan/getInventoryOutPlanDetailVOList', {planId:data.id}, function (res) {
                            if (res.code == 200) {
                                deliverProductList = res.data;
                                table.reload('deliverProductTable',{
                                    data: deliverProductList,
                                })
                            } else {
                                layer.msg(res.msg, {icon: 2});
                            }
                        }, 'GET');


                    //发货时间
                    laydate.render({
                        elem: '#sendTime'
                        ,type: 'datetime'
                    });

                    var deliverProductTable = table.render({
                        elem: '#deliverProductTable',
                        data: deliverProductList,
                        cellMinWidth: 100,
                        cols: [[
                            {field: 'number', title: '序号', width: 60, type: 'numbers'}
                            , {field: 'id', title: 'ID', width: 60, hide: true}
                            , {field: 'skuCode', sort: true, title: '物料编号', width: 150}
                            , {field: 'productPic', sort: true, title: '图片', width: 120}
                            , {field: 'productName', sort: true, title: '物料名称', width: 150}
                            , {field: 'skuSpecCode', title: '规格'}
                            , {field: 'enterpriceCode', title: '企业货号'}
                            , {field: 'barcode', title: '国标条码'}
                            , {field: 'unitName', title: '最小单位'}
                            , {field: 'supplyPrice', title: '平台结算价'}
                            , {field: 'quantity', title: '出库数量'}
                            , {field: 'inventoryTotal', title: '最小单位库存',width: 150}
                            , {field: 'totalMoney', title: '总金额'}
                        ]]
                        ,done: function(res, curr, count){

                        }
                    });
                    $("#backBtn").click(function () {
                        layer.close(index);//关闭窗口
                    })
                }
            });
        }

        // 删除
        function doDelete(obj) {
            layer.confirm('确定要审核吗？', {
                offset: '65px',
                skin: 'layui-layer-admin'
            }, function (i) {
                layer.close(i);
                layer.load(2);
                admin.req('enterprisecab/order/admin/inventoryOutPlan/updateStatus',{id:obj.data.id}, function (res) {
                    layer.closeAll('loading');
                    if (res.code == 200) {
                        layer.msg(res.msg, {icon: 1});
                        table.reload('inventoryOutPlanTable',{
                        })
                    } else {
                        layer.msg(res.msg, {icon: 2});
                    }
                }, 'PUT');
            });
        }

        // 导出excel
        $('#inventoryOutPlanBtnExport').click(function () {
            var checkRows = table.checkStatus('inventoryOutPlanTable');
            if (checkRows.data.length == 0) {
                layer.msg('请选择要导出的数据', {icon: 2});
            } else {
                table.exportFile(insTb.config.id, checkRows.data, 'xls');
            }
        });

    });
</script>